<template>
  <div class="login">
    <div class="form">
      <van-cell-group>
        <van-field
          ref="userBox"
          v-model="userInfo.username"
          clearable
          label="用户名"
          placeholder="请输入用户名"
        />
        <van-field v-model="userInfo.password" clearable type="password" label="密码" placeholder="请输入密码" />
      </van-cell-group>
      <van-button type="primary" :disabled="loginEnable" @click="login(userInfo)">立即登录</van-button>
      <div class="tips">
        <span>忘记密码? </span>
        <span class="find-back">找回</span>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.login {
  padding:2vh 0;
  min-height: 100vh;
  background-color: #f4f4f4;
  .van-cell {
    align-items: center;
  }
}


.form {
  padding: 0.8rem;
    .van-button{
      margin-top:0.9rem;
      width:100%;
    } 
    .tips{
      text-align: right;
      margin-top:0.4rem;
      font-size:.186667rem;
      color:#999;
      .find-back{
        color:#07c160
      }
    }
}
</style>
<script>
export default {
  data() {
    return {
      userInfo:{
        username: "",
        password: ""
      }
    };
  },
  computed:{
    loginEnable:function(){
      return !(this.userInfo.username && this.userInfo.password)
    }
  },
  methods:{
    login(data){
      this.$store.dispatch('user/login', data).then(() => {
        this.$router.push('/');
      })
    }
  },
  mounted(){
    this.$refs.userBox.focus();
  }
};
</script>